<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>多款炫酷鼠标悬停图文动画效果</title>
	<link rel="stylesheet" type="text/css" href="css/lanren.css">
</head>
<body>

	<!-- 代码部分begin -->
	<div class="lanren">
		<div class="full-length">
		    <div class="container">
		    	<!-- Effect-1 -->
		        <h2><span>Effects 1</span></h2>
		        <ul>
		        	<li>
		            	<div class="port-1 effect-1">
		                	<div class="image-box">
		                    	<img src="images/img-1.jpg" alt="Image-1">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-1 effect-2">
		                	<div class="image-box">
		                    	<img src="images/img-1.jpg" alt="Image-2">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-1 effect-3">
		                	<div class="image-box">
		                    	<img src="images/img-1.jpg" alt="Image-3">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		        </ul>
		        <!-- Effect-1 End -->
		        
		    	<!-- Effect-2 -->
		    	<h2><span>Effects 2</span></h2>
		    	<ul>
		        	<li>
		            	<div class="port-2 effect-1">
		                	<div class="image-box">
		                    	<img src="images/img-2.jpg" alt="Image-1">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-2 effect-2">
		                	<div class="image-box">
		                    	<img src="images/img-2.jpg" alt="Image-2">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-2 effect-3">
		                	<div class="image-box">
		                    	<img src="images/img-2.jpg" alt="Image-3">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		        </ul>
		        <!-- Effect-2 End -->
		        
		        <!-- Effect-3 -->
		    	<h2><span>Effects 3</span></h2>
		    	<ul>
		        	<li>
		            	<div class="port-3 effect-1">
		                	<div class="image-box">
		                    	<img src="images/img-1.jpg" alt="Image-1">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-3 effect-2">
		                	<div class="image-box">
		                    	<img src="images/img-1.jpg" alt="Image-2">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-3 effect-3">
		                	<div class="image-box">
		                    	<img src="images/img-1.jpg" alt="Image-3">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		        </ul>
		        <!-- Effect-3 End -->
		        
		        <!-- Effect-4 -->
		    	<h2><span>Effects 4</span></h2>
		    	<ul>
		        	<li>
		            	<div class="port-4 effect-1">
		                	<div class="image-box">
		                    	<img src="images/img-2.jpg" alt="Image-1">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-4 effect-2">
		                	<div class="image-box">
		                    	<img src="images/img-2.jpg" alt="Image-2">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-4 effect-3">
		                	<div class="image-box">
		                    	<img src="images/img-2.jpg" alt="Image-3">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		        </ul>
		        <!-- Effect-4 End -->
		        
		        <!-- Effect-5 -->
		    	<h2><span>Effects 5</span></h2>
		    	<ul>
		        	<li>
		            	<div class="port-5 effect-1">
		                	<div class="image-box">
		                    	<img src="images/img-1.jpg" alt="Image-1">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-5 effect-2">
		                	<div class="image-box">
		                    	<img src="images/img-1.jpg" alt="Image-2">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-5 effect-3">
		                	<div class="image-box">
		                    	<img src="images/img-1.jpg" alt="Image-3">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		        </ul>
		        <!-- Effect-5 End -->
		        
		        <!-- Effect-6 -->
		    	<h2><span>Effects 6</span></h2>
		    	<ul>
		        	<li>
		            	<div class="port-6 effect-1">
		                	<div class="image-box">
		                    	<img src="images/img-2.jpg" alt="Image-1">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-6 effect-2">
		                	<div class="image-box">
		                    	<img src="images/img-2.jpg" alt="Image-2">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-6 effect-3">
		                	<div class="image-box">
		                    	<img src="images/img-2.jpg" alt="Image-3">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		        </ul>
		        <!-- Effect-6 End -->
		        
		        <!-- Effect-7 -->
		    	<h2><span>Effects 7</span></h2>
		    	<ul>
		        	<li>
		            	<div class="port-7 effect-1">
		                	<div class="image-box">
		                    	<img src="images/img-1.jpg" alt="Image-1">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-7 effect-2">
		                	<div class="image-box">
		                    	<img src="images/img-1.jpg" alt="Image-2">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-7 effect-3">
		                	<div class="image-box">
		                    	<img src="images/img-1.jpg" alt="Image-3">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		        </ul>
		        <!-- Effect-7 End -->
		        
		        <!-- Effect-8 -->
		    	<h2><span>Effects 8</span></h2>
		    	<ul>
		        	<li>
		            	<div class="port-8 effect-1">
		                	<div class="image-box">
		                    	<img src="images/img-2.jpg" alt="Image-1">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-8 effect-2">
		                	<div class="image-box">
		                    	<img src="images/img-2.jpg" alt="Image-2">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		            <li>
		            	<div class="port-8 effect-3">
		                	<div class="image-box">
		                    	<img src="images/img-2.jpg" alt="Image-3">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>Your Title</h3>
		                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
		                    	<a href="#" class="btn">Learn more</a>
		                    </div>
		                </div>
		            </li>
		        </ul>
		        <!-- Effect-8 End -->
		    </div>
		</div>
	</div>
	<!-- 代码部分end -->
	
</html>